<template>
  <div class="container">
    <el-scrollbar height="100vh">
      <div class="wrap">
        <div class="content">
          <div class="header">
            <img src="@img/shxx/shxx_03.png" alt />
          </div>
          <div class="list">
            <div class="item">
              <span class="title">经营户：</span>
              <span class="word">{{ props.userinfo.name }}</span>
            </div>
            <div class="item">
              <span class="title">摊位号：</span>
              <span class="word">{{ props.userinfo.twhname }}</span>
            </div>
            <div class="item">
              <span class="title">经营类别：</span>
              <span class="word">{{ props.userinfo.jyfw }}</span>
            </div>
            <div class="item">
              <span class="title">所属市场：</span>
              <span class="word">{{ props.userinfo.marketnm }}</span>
            </div>
            <div class="item">
              <span class="title">入驻时间：</span>
              <span class="word">
                {{
                props.userinfo.ruzhutime ? props.userinfo.ruzhutime.slice(0, 10) : ""
                }}
              </span>
            </div>
            <div class="item">
              <span class="title">信用等级：</span>
              <span class="word">
                <img v-for="i in props.userinfo.xydj * 1" :key="i" src="@img/cxgs/cxgs_13.png" alt />
                <img v-for="i in 5 - props.userinfo.xydj" :key="i" src="@img/cxgs/cxgs_10.png" alt />
              </span>
            </div>
          </div>
          <div class="swiper">
            <!-- <el-carousel arrow="always" indicator-position="outside">
            <el-carousel-item :key="item">
              <img :src="userInfo.yyzz" alt="" />
            </el-carousel-item>
            </el-carousel>-->
            <div class="img">
              <el-image
                :preview-src-list="[props.userinfo.yyzz]"
                fit="cover"
                :src="props.userinfo.yyzz"
                alt
              >
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <icon-picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </div>
          <div class="qrcode">
            <qrcode-vue :value="qrcodeUrl + props.userinfo.id" :size="120" level="H" />
            <div>商户二维码</div>
          </div>
          <div class="back">
            <img @click="handleBack" src="@img/shxx/shxx_29.png" alt />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import QrcodeVue from "qrcode.vue";
import emitter from "@/utils/eventBus";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
const props = defineProps(["userinfo"]);
const userInfo = props.userinfo;
const qrcodeUrl = ref("https://h5qct.yskjtz.com?sc=t&type=sh&id=");
// const userInfo = ref(route.query);
const handleBack = () => {
  // router.go("-1");
  emitter.emit("closeDialog");
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background: url("@img/shxx/shxx.png");
  background-size: cover;
  .wrap {
    height: 100%;
    padding: 40px 40px 20px 40px;
    ::v-deep .el-scrollbar {
      height: 100%;
      .el-scrollbar__wrap {
        height: 100%;
      }
    }
    .content {
      // width: 100%;
      height: 100%;
      background: #fff;
      position: relative;
      padding-bottom: 20px;

      .header {
        text-align: center;
        img {
          width: 300px;
          height: 62px;
        }
      }
      .list {
        padding: 20px 37px;
        span {
          display: inline-block;
          height: 25px;
          line-height: 25px;
          margin-top: 8px;
        }
        .title {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          font-size: 20px;
          color: #000000;
        }
        .word {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 300;
          font-size:20px;
          color: #000000;
          img {
            width: 20px;
          }
        }
      }
      .swiper {
        height: 280px;
        .el-image {
          width: 100%;
          height: 230px;
        }
        ::v-deep .el-carousel {
          height: 280px;
          .el-carousel__item {
            height: 230px;
          }
          .el-carousel__container {
            height: 230px;
          }
        }
      }
      .qrcode {
        text-align: center;
        div {
          margin-top: 10px;
          font-weight: 600;
          font-size: 18px;
        }
      }
      .back {
        position: absolute;
        right: 20px;
        bottom: 40px;
        img {
          width: 80px;
        }
      }
    }
  }
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #fff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #fff;
}
</style>
